<!-- Copyright 2020 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/html/action_link.html">
<link rel="import" href="chrome://resources/html/util.html">

<link rel="import" href="../../cr_ui.html">
<link rel="import" href="../../components/display_manager_types.html">
<link rel="import" href="../../components/throbber_notice.html">
<link rel="import" href="../../components/behaviors/login_screen_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_i18n_behavior.html">

<dom-module id="app-launch-splash-element">
  <template>
    <style>
      #content {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 100%;
        height: 100%;
        position: relative;
      }

      #header {
        background: left center no-repeat;
        background-size: 96px;
        display: flex;
        flex-direction: column;
        height: 96px;
        justify-content: center;
        max-width: 100%;
        padding-inline-start: 108px;
      }

      #appName {
        color: #666;
        font-size: 48px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
      }

      #appUrl {
        color: #666;
        font-size: 18px;
        font-style: italic;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
      }

      #launchText {
        color: #666;
        font-size: 18px;
        padding-top: 50px;
      }

      #configNetworkContainer {
        height : 30px;
        opacity: 1;
        padding-bottom: 20px;
        transition: 1s opacity;
      }

      #configNetworkContainer.faded {
        opacity: 0;
      }

      #configNetwork {
        font-size: 10px;
        font-weight: bold;
        margin: 0;
        padding: 0;
        text-decoration: none;
      }

      #configNetwork:hover {
        color: rgb(202, 67, 100)
      }

      #shortcutInfo {
        bottom: 50px;
        color: rgb(102, 102, 102);  /* #666 */
        left: 0;
        position: absolute;
        right: 0;
        text-align: center;
      }
    </style>

    <div id="content">
      <div id="header">
        <div id="appName">[[appName]]</div>
        <div id="appUrl">[[appUrl]]</div>
      </div>
      <div id="launchText">[[launchText]]</div>
      <div id="configNetworkContainer" class="faded">
        <a id="configNetwork" class="oobe-local-link" is="action-link" on-click='onConfigNetwork_'>
          [[i18nDynamic(locale, 'configureNetwork')]]
        </a>
      </div>
      <throbber-notice>
      </throbber-notice>
    </div>
    <p id="shortcutInfo">
      [[i18nDynamic(locale, 'shortcutInfo')]]
    </p>
  </template>
  <script src="app_launch_splash.js"></script>
</dom-module>